<!DOCTYPE html>
<html lang="en">
<head>
    <title>初始化配置</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/static/bootstrap.min.css">
    <!-- Custom CSS -->
    <style>
        #countdown {
            display: none;
            background-color: #f1f1f1;
            padding: 20px;
            position: fixed;
            top: 50%;
            left: 50%;
            color: #3c3c3c;
            font-weight: bold;
            transform: translate(-50%, -50%);
            z-index: 9999;

        }
        body {
            background-color: #f5f5f5;
            font-family: Arial, sans-serif;
        }

        h2 {
            color: #3c3c3c;
            font-weight: bold;
        }

        label {
            font-weight: bold;
        }

        .form-container {
            background-color: #ffffff;
            padding: 30px;
            border-radius: 5px;
            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        }

        .btn-primary {
            background-color: #3c3c3c;
            border-color: #3c3c3c;
        }

        .btn-primary:hover {
            background-color: #5e5e5e;
            border-color: #5e5e5e;
        }
    </style>


</head>
<body>
    <div id="countdown">
        <p>等待服务启动</p>
        <p>倒计时 <span id="countdownValue">5</span> 秒后跳转...</p>
    </div>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-6">
                <h2 class="text-center mt-5">Openstick kvm</h2>
                <form class="mt-4" name="act" method="POST">
                    <div class="form-group">
                        <div class="text-center">
                            <button type="button" onclick="sendPostData('poweron')" class="btn btn-primary">开机</button>
                            <button type="button" onclick="sendPostData('poweroff')" class="btn btn-primary">关机</button>
                            <button type="button" onclick="sendPostData('forceoff')" class="btn btn-primary">强制关机</button>
                            <button type="button" onclick="sendPostData('keyboard')" class="btn btn-primary">键盘</button>
                            <button type="button" onclick="sendPostData('keyandmouse')" class="btn btn-primary">键盘键鼠</button>
                            <button type="button" id="reload" class="btn btn-primary">刷新图片</button>
                        </div>
                    </div>
                </form>
                <form class="mt-4" name="myForm" onsubmit="return validateForm()"  method="POST">
                    <div class="form-group">
                        <label for="selectResolution">分辨率：</label>
                        <select class="form-control" id="selectResolution" name="resolution">
                            <option value="1280x720" {% if default_resolution == "1280x720" %}selected{% endif %}>1280x720</option>
                            <option value="1920x1080" {% if default_resolution == "1920x1080" %}selected{% endif %}>1920x1080</option>
                            <option value="1600x1200" {% if default_resolution == "1600x1200" %}selected{% endif %}>1600x1200</option>
                            <option value="1360x768" {% if default_resolution == "1360x768" %}selected{% endif %}>1360x768</option>
                            <option value="1280x1024" {% if default_resolution == "1280x1024" %}selected{% endif %}>1280x1024</option>
                            <option value="1280x960" {% if default_resolution == "1280x960" %}selected{% endif %}>1280x960</option>
                            <option value="1024x768" {% if default_resolution == "1024x768" %}selected{% endif %}>1024x768</option>
                            <option value="800x600" {% if default_resolution == "800x600" %}selected{% endif %}>800x600</option>
                            <option value="720x576" {% if default_resolution == "720x576" %}selected{% endif %}>720x576</option>
                            <option value="720x480" {% if default_resolution == "720x480" %}selected{% endif %}>720x480</option>
                            <option value="640x480" {% if default_resolution == "640x480" %}selected{% endif %}>640x480</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="selectFramerate">帧数：</label>
                        <select class="form-control" id="selectFramerate" name="framerate">
                            <option value="5fps" {% if default_framerate == "5fps" %}selected{% endif %}>5fps</option>
                            <option value="10fps" {% if default_framerate == "10fps" %}selected{% endif %}>10fps</option>
                            <option value="15fps" {% if default_framerate == "15fps" %}selected{% endif %}>15fps</option>
                            <option value="20fps" {% if default_framerate == "20fps" %}selected{% endif %}>20fps</option>
                            <option value="25fps" {% if default_framerate == "25fps" %}selected{% endif %}>25fps</option>
                            <option value="60fps" {% if default_framerate == "60fps" %}selected{% endif %}>60fps</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="selectSerial">串口设备：</label>
                        <select class="form-control" id="selectSerial" name="serial">
                            <option value="ttyUSB0" {% if default_serial == "ttyUSB0" %}selected{% endif %}>ttyUSB0</option>
                            <option value="ttyMSM0" {% if default_serial == "ttyMSM0" %}selected{% endif %}>ttyMSM0</option>
                            <!-- 其他串口设备选项 -->
                        </select>
                    </div>

                    <div class="text-center">
                        <button type="submit" class="btn btn-primary">进入远程桌面</button>
                    </div>
                </form>
            </div>
        </div>
		{% if image_ready %}
		<img src="/image/capture.jpg" class="img-fluid" id="lazy-img"> 
		{% else %}
		<img src="" id="lazy-img">
		{% endif %}
    </div>

<script src="/static/jquery.min.js"></script>
<script src="/static/bootstrap.bundle.min.js"></script>

<script>
$('#reload').click(function() {
  $.get('/reload_image', function() {
    location.reload();
  }); 
})
function validateForm() {
    var formData = {
        resolution: document.getElementById("selectResolution").value,
        framerate: document.getElementById("selectFramerate").value,
        serial: document.getElementById("selectSerial").value
    };

    // 执行POST请求
    performPostRequest(formData);

    // 开始倒计时
    startCountdown();

    return false; // 阻止表单的默认提交行为
}

// 处理POST请求
function performPostRequest(formData) {
    fetch('/login/kvm', {
        method: 'POST',
        body: JSON.stringify(formData),
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(function(response) {
        if (!response.ok) {
            // 处理请求失败的情况
            console.error('POST请求失败');
        }
    })
    .catch(function(error) {
        console.error('POST请求发生错误:', error);
    });
}

// 开始倒计时
function startCountdown() {
    var countdown = 5; // 倒计时时间（秒）

    // 弹出倒计时消息框
    var countdownBox = document.getElementById("countdown");
    countdownBox.style.display = "block";

    // 更新倒计时并在倒计时结束后执行页面跳转
    function updateCountdown() {
        if (countdown > 0) {
            setTimeout(function () {
                countdown--;
                countdownBox.innerHTML = ' <p>等待服务启动</p>倒计时 <span id="countdownValue">' + countdown + '</span> 秒后跳转...';
                //countdownBox.textContent = countdown;
                updateCountdown();
            }, 1000);
        } else {
            var port = window.location.port;        
            var hostname = window.location.hostname;
            var protocol = window.location.protocol; 
            var redirectURL = protocol + '//' + hostname + ':'+port+'/kvm';

            window.location.href = redirectURL;
        }
    }

    // 开始倒计时
    updateCountdown();
}
function sendPostData(action) {
    // 创建一个包含动作的JSON对象
    var data = {
        action: action
    };

    // 发送POST请求
    fetch("/login/kvm", {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
    })
    .then(function(response) {
        if (!response.ok) {
            // 处理请求失败的情况
            console.error("POST请求失败");
        }
    })
    .catch(function(error) {
        console.error("POST请求发生错误:", error);
    });
}
    </script>

 
</body>
</html>
